<template>
  <!--轮播图-->
  <div class="lunbo">
    <el-carousel indicator-position="outside" height="400px" ref="carousel">
      <el-carousel-item v-for="(item,index) in carouselList" :key="index">
        <img :src="item.pictureUrl" @click="ToCarouselList(item.pid)"/>
      </el-carousel-item>
    </el-carousel>
  </div>
  <h3>最新获奖:</h3>
    <div class="div-san">
      <div class="huojiang" v-for="win in winnerList" :key="win">
        <img class="img2" :src="win.headUrl">
        <p>昵称：<span>{{ win.account }}</span></p>
        <p>奖品：<span>{{ win.awardName }}</span></p>
      </div>
    </div>
</template>

<script>
export default {
  name: "Lunbo",
  data() {
    return {
      carouselList: [],
      winnerList: [],
    }
  },

  mounted() {
    this.Lunbo();
    this.WinnerInfo();
  },

  methods: {
    Lunbo() {
      this.$axios.get('/picture/shouye')
          .then(data => {
            if (data.code === 0) {
              this.carouselList = data.result.picture;
              //alert(data.result.picture);
              if (this.carouselList == '' || this.carouselList == null) {
                this.$message({
                  message: '抱歉,轮播图出了点问题,工作人员正在解决',
                  type: 'error'
                })
                return;
              }
              this.$refs.carousel.next();
            }
          }).catch(error => {
        console.log(error);
      })
    },
    WinnerInfo() {
      this.$axios.get('/winner/winnerinfo')
          .then(data => {
            this.winnerList = data.result.winner;
            //alert(this.winnerList);
            if (this.winnerList == '' || this.winnerList == null) {
              this.$message({
                message: '抱歉,主页出了点问题,工作人员正在解决',
                type: 'error'
              })
              return;
            }
          }).catch(error => {
        console.log(error);
      })
    },

    ToCarouselList(pid){
      console.log("pid="+pid);
      if(pid == 1){
        this.$router.push({path: '/blindbox'});
      }else if(pid == 2){
        this.$router.push({path: '/signin'});
      }else{
        this.$router.push({path: '/picturemsg'});
      }
    },
  }
}
</script>

<style scoped>
.lunbo {
  width: 75rem;
  margin-top: 5rem;
  margin-left: 8rem;
}

.div-san {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  margin-left: -18rem;
}

.huojiang {
  border: solid 1px black;
  width: 190px;
  height: 200px;
  margin-left: 300px;
}

.img2 {
  width: 80px;
  height: 80px;
  border-radius: 50px;
  margin-top: 2px;
  margin-left: auto;
}

h3 {
  margin-right: 80rem;
  margin-top: 3rem;
}

p {
  margin-left: -1rem;
  margin-top: 1.5rem;
}

span {
  margin-left: 5px;
}
</style>